<template>
  <div>
    <el-page-header @back="goBack" content="学校注册页面">
</el-page-header>
<el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="80px" style="width:800px">
                <el-form-item label="账号" prop="username">
                    <el-input placeholder="请输入账号" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="校名" prop="realName">
                    <el-input placeholder="请输入校名" v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input placeholder="请输入手机号码" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <el-input style="width:138px;" placeholder="验证码" v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <div @click="createCode" ref="canvas" class="login-code-img" id="canvasBox">
                    <canvas class="show-captcha" id="canvas" style="width: 100%; height: 100%;"></canvas>
                    </div>
                </el-form-item>
            </el-form>
            <div class="form-footer">
                <el-button type="primary" @click="submit">确 定</el-button>
                <el-button type="warn" @click="resetForm">重置</el-button>
            </div>
  </div>

</template>

<script>
import drawPic from '@/utils/verificationCode'
import { regSchool } from '../api/index.js'
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        realName: '',
        phone: '',
        code: ''
      },
      verificationCode: '',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{4,20}$/, message: '请输入长度4到20的字母或数字', trigger: 'blur' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{6,18}$/, message: '请输入长度6到18的字母或数字', trigger: 'blur' }

        ],
        realName: [
          { required: true, message: '请输入校名', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11个字符', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '手机号码格式错误', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '长度在4个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    goBack () {
      this.$router.push('/login')
      // console.log('go back')
    },
    submit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (!(this.verificationCode.toLowerCase() === this.form.code.toLowerCase())) {
            return this.$message.error('验证码错误')
          }
          await regSchool(this.form).then(({ data }) => {
            if (data.status === 200) {
              this.$message.success(data.message)
              this.$router.push('/login')
            } else {
              this.$message.error(data.message)
            }
          })
        } else {
          this.$message.info('请按要求填写表单')
        }
      })
    },
    // 生成验证码
    makeCode () {
      drawPic.VerificationCodeErrCount = 0
      drawPic.randomCode = drawPic()
      this.verificationCode = drawPic.randomCode
      return drawPic.randomCode
    },
    // 刷新验证码
    createCode () {
      this.makeCode()
    },
    resetForm () {
      this.$refs.form.resetFields()
    }
  },
  mounted () {
    this.makeCode()
  }
}
</script>
<style lang='less' scoped>
.el-form{
  margin:0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  .login-code-img{
    width: 98px;
    height:40px;
  }
}
.form-footer{
  width: 400px;
  margin: 0 auto;
}

</style>
